<!--
 * @Descripttion: 
 * @version: 
 * @Author: sueRimn
 * @Date: 2023-01-07 11:08:51
 * @LastEditors: sueRimn
 * @LastEditTime: 2023-01-07 15:19:54
-->
<template>
  <div class="demo">
    <nut-swipe>
      <nut-cell round-radius="0" desc="左滑删除" />
      <template #right>
        <nut-button shape="square" style="height: 100%" type="danger"
          >删除</nut-button
        >
      </template>
    </nut-swipe>
    <nut-swipe disabled>
      <nut-cell round-radius="0" desc="禁止滑动" />
      <template #right>
        <nut-button shape="square" style="height: 100%" type="danger"
          >删除</nut-button
        >
      </template>
    </nut-swipe>
    <nut-swipe>
      <template #left>
        <nut-button shape="square" style="height: 100%" type="success"
          >选择</nut-button
        >
      </template>
      <nut-cell round-radius="0" desc="左滑右滑都可以哦" />
      <template #right>
        <nut-button shape="square" style="height: 100%" type="danger"
          >删除</nut-button
        >
        <nut-button shape="square" style="height: 100%" type="info"
          >收藏</nut-button
        >
      </template>
    </nut-swipe>
    <nut-swipe ref="refSwipe" @open="open" @close="close">
      <nut-cell title="异步打开关闭">
        <template v-slot:link>
          <nut-switch
            v-model="checked"
            @change="changSwitch"
            active-text="开"
            inactive-text="关"
          />
        </template>
      </nut-cell>
      <template #right>
        <nut-button shape="square" style="height: 100%" type="danger"
          >删除</nut-button
        >
      </template>
    </nut-swipe>
    <nut-swipe>
      <template #left>
        <nut-button shape="square" style="height: 100%" type="success"
          >选择</nut-button
        >
      </template>
      <nut-cell title="商品描述">
        <template v-slot:link>
          <nut-input-number v-model="number" />
        </template>
      </nut-cell>
      <template #right>
        <nut-button shape="square" style="height: 100%" type="danger"
          >删除</nut-button
        >
        <nut-button shape="square" style="height: 100%" type="info"
          >收藏</nut-button
        >
      </template>
    </nut-swipe>
  </div>
</template>

<script lang="ts">
import { toRefs, reactive, ref, onMounted } from "vue";

export default {
  props: {},
  setup() {
    const number = ref(0);
    const refSwipe = ref<HTMLElement>();
    const checked = ref(false);
    const changSwitch = (value: boolean) => {
      if (value) {
        refSwipe.value?.open("left");
      } else {
        refSwipe.value?.close();
      }
    };
    const open = (obj: any) => {
      console.log(obj);
      checked.value = true;
    };
    const close = () => {
      checked.value = false;
    };

    return {
      checked,
      changSwitch,
      refSwipe,
      open,
      close,
      number,
    };
  },
};
</script>

<style lang="scss" scoped>
.demo {
  overflow-x: hidden;
}
</style>
